<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Docs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Always force latest IE rendering engine or request Chrome Frame -->
  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

  <!-- Use title if it's in the page YAML frontmatter -->
  <title>Docs</title>

  <link href="stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
  <script src="javascripts/application.js" type="text/javascript"></script>

  <!--[if lt IE 9]>
    <script src="javascripts/html5shiv.js" type="text/javascript"></script>
  <![endif]-->

</head>

<body data-spy="scroll" data-target=".bs-docs-sidebar">

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="brand" href="./">Docs</a>

      <div class="nav-collapse collapse">
        <ul class="nav">

          

              
              <li>
                <a href="index.html">Home</a>
              </li>

          

              
              <li>
                <a href="files.html">Files</a>
              </li>

          

              
              <li>
                <a href="general_layout.html">Layout</a>
              </li>

          

              
              <li>
                <a href="widgets.html">Widgets</a>
              </li>

          

              
              <li>
                <a href="help.html">Help</a>
              </li>

          

        </ul>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">

  <!-- Docs nav
  ================================================== -->
  <div class="row-fluid">
    <div class="span3 bs-docs-sidebar">
      <ul class="nav nav-list bs-docs-sidenav">

        
            <li><a href="#box">Box</a></li>
        
            <li><a href="#buttons">Buttons</a></li>
        

      </ul>
    </div>

    <div class="span9">

      <div class="page-header">
  <h1>Widgets</h1>
</div>

<p>
  I'm going to list here the most important elements that you need to know about before diving into code. Most widgets are split up into multiple files in the <b>partials</b> folder which you'll find in the theme. Some widgets have an easy markup/css and come directly in the pages.
</p>


      
          <section id="box">
            <div class="page-header">
              <h4>Box</h4>
            </div>
            
<p>The box is the thing you'll find on every page, which holds the content of the widgets. It's size is given by the content it holds (vertically) and the bootstrap span_x class that holds it (horizontally)</p>
<p>Here's the main structure of a box:</p>

<xmp class="prettyprint">
  <div class="box">
    <div class="box-header">
      <span class="title">Some title here</span>
    </div>

    <!-- box content doesn't actually do anything so feel free not to use it. I recommend sticking with it though, things might change with a theme update -->

    <div class="box-content padded">
      your content here
    </div>
  </div>
</xmp>

<p>A box can have a list of components to the right like this:</p>

<xmp class="prettyprint">
  <div class="box">
    <div class="box-header">
      <span class="title">Some title here</span>

      <!-- it doesn't necessarily needs to be a UL element, but you'll usually list stuff in here so there it is -->

      <ul class="box-toolbar">
        <li class="toolbar-link">
          <a href="#" data-toggle="dropdown"><i class="icon-cog"></i></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-plus-sign"></i> Add</a></li>
            <li><a href="#"><i class="icon-remove-sign"></i> Remove</a></li>
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</xmp>

<div class="page-header">
  <h5>Box with Tabs</h5>
</div>

<p>The bootstrap tabbable component has been integrated to work with boxes too</p>

<p>You can put it to the left</p>

<xmp class="prettyprint">
  <div class="box-header">

    <!-- notice the nav-tabs-left -->

    <ul class="nav nav-tabs nav-tabs-left">
      <li class="active"><a href="#home" data-toggle="tab"><i class="icon-home"></i></a></li>
      <li><a href="#messages" data-toggle="tab"><i class="icon-comments-alt"></i> <span>Messages</span></a></li>
      <li><a href="#settings" data-toggle="tab"><i class="icon-cog"></i> <span>Settings</span></a></li>
    </ul>

    <div class="title">Left tabs</div>
  </div>
</xmp>

<p>You can put it to the right</p>

<xmp class="prettyprint">
  <div class="box-header">
    <div class="title">Left tabs</div>

    <!-- notice the nav-tabs-right -->

    <ul class="nav nav-tabs nav-tabs-right">
      <li class="active"><a href="#home" data-toggle="tab"><i class="icon-home"></i></a></li>
      <li><a href="#messages" data-toggle="tab"><i class="icon-comments-alt"></i> <span>Messages</span></a></li>
      <li><a href="#settings" data-toggle="tab"><i class="icon-cog"></i> <span>Settings</span></a></li>
    </ul>

  </div>
</xmp>
</xmp>


<div class="page-header">
  <h5>Box Footer</h5>
</div>

<p>Add a footer to the box, after <code>box-content</code></p>

<xmp class="prettyprint">
  <div class="box-footer padded">
    <div class="row-fluid">
      <div class="span6 text-center">
        <div>LAST PAYMENT</div>
        <div><strong>Jan 14, 2013</strong></div>
      </div>
      <div class="span6">
        <a href="#" class="btn btn-blue btn-block"><i class="icon-money"></i> Make a payment</a>
      </div>
    </div>
  </div>
</xmp>
          </section>
      
          <section id="buttons">
            <div class="page-header">
              <h4>Buttons</h4>
            </div>
            <p>Buttons have almost the same markup as bootstrap's original buttons</p>

<p>Although there is a <code>buttons.scss</code> file, the magic stands in the <code>variables.scss</code> file, where all the colors and classes are defined</p>

<p>Basically, if you want a new button class, add a class name and a color in there, and everything else will be regenerated</p>

<p>You get by default</p>

<ul>
  <li>default</li>
  <li>red</li>
  <li>green</li>
  <li>blue</li>
  <li>gray</li>
  <li>black</li>
  <li>lightblue</li>
  <li>gold</li>
  <li>sea</li>
  <li>brown</li>
  <li>twitter</li>
  <li>facebook</li>
</ul>

<div class="page-header">
  <h5>Action Nav Buttons</h5>
</div>

<p>There are a few variations of the <code>action-nav</code></p>

<xmp class="prettyprint">
  <ul class="action-nav-normal">

    <li>
      <a href="#" class="tip" title="New Project">
        <i class="icon-file-alt"></i>
        <span>New Project</span>
      </a>

      <!-- optional triangle button. the LI needs to be relative for this to work -->
      <span class="triangle-button red"><i class="icon-plus"></i></span>
    </li>

    ...
  </ul>
</xmp>

<p>Add a <code>rounded</code> class to the action-nav to make it... round :)</p>

<xmp class="prettyprint">
  <ul class="action-nav-normal rounded">
    <li>
      <a href="#" class="tip" title="Files">
        <i class="icon-folder-open-alt"></i>
      </a>
    </li>
  </ul>
</xmp>
          </section>
      

    </div>
  </div>

</div>
</body>
</html>